<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>排行榜</title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="../css/base.css"/>
	<style type="text/css">
		/* css of now page */
		.rank{
			width: 100%;
			padding: 0;
			display: flex;
			justify-content: space-around;
		}
		.rank li{
			list-style: none;
			width: 45%;
			height: 150px;
			text-align: center;
			line-height: 150px;
		}
		.rank li:first-child{
			background: linear-gradient(#941AE6, #F1E0FC);
			background: -webkit-gradient(#941AE6, #F1E0FC);
		}
		.rank li:last-child{
			background: linear-gradient(#3370CC, #CEE1FD);
			background: -webkit-gradient(#3370CC, #CEE1FD);
		}
		.db-movie-list li .main_img{
			max-width: 1.2rem;
			width: 1.2rem;
			height: auto;
		}
		.db-movie-list li .title{
			font-size: 16px;
			font-weight: normal;
		}
		.db-movie-list li p{
			color: #AAAAAA;
		}
		.db-movie-list li p span{
			color: #FF0000;
			display: inline;
			padding-left: 5rpx;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
		<h1 class="mui-title">排行榜</h1>
	</header>
	<div class="mui-content" id="app">
		
		<div id="slider" class="mui-slider" >
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../images/banner3.jpg">
					</a>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/banner1.jpg">
					</a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/banner2.jpg">
					</a>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/banner3.jpg">
					</a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../images/banner1.jpg">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		
		<ul class="rank">
			<li id='top250'>Top250</li>
			<li>北美票房榜</li>
		</ul>
		
		<!-- 图文列表 -->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron db-movie-list">
					<li class="mui-table-view-cell mui-media" v-for="item in movies" :key="item.id" @tap="lookDetail(item.id)">
						<a class="mui-navigate-right">
							<img class="mui-media-object mui-pull-left main_img" :src="item.images.large">
							<div class="mui-media-body">
								<h3 class="title">{{item.title}}</h3>
								<p class='mui-ellipsis'>{{item.genres}}<span>{{item.rating.average}}</span></p>
								<p class='mui-ellipsis'>导演：{{item.directors2}}</p>
								<p class='mui-ellipsis'>主演：{{item.casts2}}</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

    <script src="../js/mui.min.js"></script>
	<script src="../js/vue.js"></script>
	
	<!-- Vue and mui -->
	<script type="text/javascript">
		
		let moviesDeatil;
		mui.plusReady(function () {
		    
			moviesDeatil = plus.webview.getWebviewById('mDeatil');
			if(!moviesDeatil){
				//	预加载(新建窗口)
				moviesDeatil = mui.preload({
					url: '../pages/moviesDeatil.html',	//	将页面加载到窗口
					id: 'mDeatil'	//	设置窗口id
				})
			}
		})
		
		let APP = new Vue({
			el:	'#app',
			data:{
				movies:[],
				count: 10,
				nowPage:1
			},
			methods:{
				lookDetail(id){
					mui.fire(moviesDeatil,'getMovie',{mid:id})
					
					//	新建/打开窗口 参数可以是页面路径(新建窗口)、id(显示窗口)
					mui.openWindow({
						// url: '../pages/moviesDeatil.html'
						id:	'mDeatil'
					})
				}
			}
		});
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					style:'circle',
					callback: pulldownRefresh
				},
				up: {
					auto:true,
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了...',
					callback: pullupRefresh
				}
			}
		});	
		
		function pulldownRefresh(){
			//	location.reload();	//	刷新
			
			// 重置页码为1
			APP.nowPage = 1;
			
			// 更改数组，清空数组
			APP.movies = [];
			
			// 调用上拉加载函数
			pullupRefresh();
			
			//	刷新完成，结束刷新样式
			mui('#pullrefresh').pullRefresh().endPulldown();
			//	重置上拉加载
			mui('#pullrefresh').pullRefresh().refresh(true);
		
		}
				
		function pullupRefresh(){
			mui.getJSON('http://t.yushu.im/v2/movie/in_theaters',{
				start:(APP.nowPage-1)*APP.count,
				count:APP.count,
				city:'广州',
				apikey: '0df993c66c0c636e29ecbb5344252a4a',
			},function(data){	//json对象
				//服务器返回响应，根据响应结果，分析是否登录成功；
				// console.log(JSON.stringify(data));		// 输出json字符串进行调试
				let subjects = data.subjects;
				if(subjects.length>0){
					//	对部分数据进行转换
					subjects.map((v)=>{
						v.genres = v.genres.join('/');
						
						// 导演名称
						directors = v.directors;
						let arr = [];
						directors.forEach(function(vv){
							// 数组追加
							arr.push(vv.name);  //  ["管虎","xxx"]
						})
						// 增加多一个导演下标
						v.directors2 = arr.join('/');
						
						// 演员名称
						casts = v.casts;
						let arr2 = [];
						casts.forEach(function(vvv){
							arr2.push(vvv.name);
						})
						// 增加多一个演员下标
						v.casts2 = arr2.join('/');
						
					})
				
					// 赋值
					APP.movies = APP.movies.concat(subjects);
					APP.nowPage++;
					// 允许/停止上拉加载
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
				}
				else mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
			},function(xhr,type,errorThrown){
				//异常处理；
				console.log(type);
			});
		}
		
		document.querySelectorAll('#top250')[0].addEventListener('tap',function(){
			mui.openWindow({
				url:'top250.html'
			});
		})
		
	</script>
	
	<!-- slider -->
	<script type="text/javascript" charset="utf-8">
		var slider = mui("#slider");
		slider.slider({
			interval: 3000
		});		
	</script>
	<script>
		document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')
	</script>
	<script>
		document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })
	</script>

</body>
</html>